Components and Props
コンセプトとして、コンポーネントはJSのfunctionのようなものである
任意の入力値(=props)を受け取って、描画するelementを返す
Function and Class Components
Reactから見ると以下のどちらの定義も同じ
code:JavaScript
// functional components
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// ES6 class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Rendering a Component
ユーザー定義コンポーネントの属性にわたすオブジェクトをpropsと呼ぶ
code:JavaScript
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
// “Hello, Sara” on the page
コンポーネントは常に大文字始まりにする
Composing Components
コンポーネントは他のコンポーネントをoutputで参照することができる
code:JavaScript
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Extracting Components
コンポーネントの分割は積極的に
分割の基準
複数回同じUIパーツを使ったら
単体で十分に複雑なUIパーツだったら
この辺はやっぱり経験が必要そう。
Atomic Designでも分割方法については細かく書いてないから、試行錯誤が必要なのかなー。
Props are Read-Only
Reactの唯一守るべきルール
すべてのコンポーネントはpropsを変更しない純粋関数でなければならない
次のセクションで出てくるstateがこのルールを壊さずにUIを変更する方法